<template>
  <div class="app-container">
    <el-card v-for="(item, index) in data" :key="index" class="video">
      <img :src="item.imgUrl" crossorigin="anonymous" class="video-body" />
      <span>{{ item.realName }}</span>
    </el-card>
  </div>
</template>

<script>

import { getToken } from '@/utils/auth'

export default {
  name: 'Depart',
  data() {
    return {
      websocketUrl: process.env.VUE_APP_WS_API,
      socket: null,
      data: [],
      list: [],
      _beforeUnload_time: 0,
      _gap_time: 0,
      examId: ''
    }
  },

  mounted() {
    const examId = this.$route.params.examId;
    if (typeof examId !== 'undefined') {
      this.examId = examId;
      this.initWebSocket();
    }

    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.addEventListener('unload', e => this.unloadHandler(e))
  },
  destroyed() {
    if (this.socket != null) {
      this.socket.close();
    }

    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.removeEventListener('unload', e => this.unloadHandler(e))
  },

  methods: {

    initWebSocket() {
      if ("WebSocket" in window) {
        if (this.socket == null) {
          this.socket = new WebSocket(this.websocketUrl + "/" + this.examId + "/" + this.$store.state.user.userId, [getToken()])
        }
        this.socket.onopen = this.onOpen;
        this.socket.onclose = this.onClose;
        this.socket.onerror = this.onError;
        this.socket.onmessage = this.onMessage;
      }
    },
    onOpen() {
      console.log("webSocket connect successfully")
    },
    onClose(err) {
      console.log("webSocket closed")
    },
    onMessage(event) {
      const data = JSON.parse(event.data)
      let count = this.list.length === 0 ? -1 : this.list.findIndex(val => { return val === data.data.userId });

      console.log(data)
      if (data.code === 200) {
        if (count === -1) {
          this.data.push(data.data)
          this.list.push(data.data.userId)
        } else {
          this.data[count].imgUrl = data.data.imgUrl
          this.data[count].realName = data.data.realName
        }
      }else if(data.code === 404){
        if (count !== -1) {
          this.data.splice(count, 1)
          this.list.splice(count, 1)
          // console.log(this.data)
        }
      }

      // if(this.data)


    },
    onError(e) {
      console.log("webSocket error: " + JSON.parse(e.data))

    },
    beforeunloadHandler() {
      this._beforeUnload_time = new Date().getTime();
    },
    unloadHandler(e) {
      this._gap_time = new Date().getTime() - this._beforeUnload_time;
      //判断是窗口关闭还是刷新
      if (this._gap_time <= 5) {
        if (this.socket != null) {
          this.socket.close();
        }
      }
    }
  }
}
</script>
<style scoped>
.video {
  width: 250px;

  height: 300px;
  text-align: center;
}

.video-body {
  width: 250px;

  height: 250px;
}
</style>
